<template>
    <div class="bodyBG loginBody" :class="{active:isFocus}" @click="onLoginBlur">
        <div class="loginLeft">
            <ul style="vertical-align:middle;text-align:center">
                <li class="loginLeft_1"></li>
                <li class="loginLeft_2"></li>
                <li class="loginLeft_3"></li>
                <li class="loginLeft_4"></li>
                <div>
                    <img src="../assets/qr-code.svg" />
                    <div>点击扫描二维码，即可自动登录</div>
                </div>
            </ul>
        </div>
        <div class="loginRight" onclick="event.stopPropagation();">
            <ul>
                <div class="headImg">
                    <div class="headImg2"></div>
                </div>
                <li>
                    <input type="hidden" id="hidTmpFocus" value="txtUserName" />
                    <img src="../assets/admin.svg" />
                    <input type="text" placeholder="请输入您的帐号" id="txtUserName" name="UserName" v-model="userName" @focus="onLoginfocus" style="ime-mode: disabled; outline: none;">
                </li>
                <li>
                    <img src="../assets/key.svg" />
                    <input type="password" placeholder="请输入您的密码" name="Password" id="txtPassword" v-model="userPassWord" @focus="onLoginfocus" style="ime-mode: disabled; outline: none;">
                </li>
                <li class="loginBtn" @click="onLogin">登录</li>
    
                <li class="scanLogin">扫描登录</li>
            </ul>
        </div>
    </div>
</template>

<script>
//import { mapGetters, mapActions, mapState } from 'vuex'
export default {
    name: 'login',
    computed: {
        userName: {
            get() {
                return this.$store.state.loginName
            },
            set(value) {
                //记录用户名到store
                this.$store.commit('UPDATE_LOGINNAME', { loginName: value })
            }
        },
        userPassWord: {
            get() {
                return this.$store.state.loginPassWord
            },
            set(value) {
                //记录密码到store
                this.$store.commit('UPDATE_LOGINPASSWORD', { loginPassWord: value })
            }
        }
    },
    data() {
        return {
            isFocus: false,
        }
    },
    methods: {
        onLoginfocus() {
            this.isFocus = true
        },
        onLoginBlur() {
            this.isFocus = false
        },
        onLogin() {
            var _this = this
            var loading = layer.load()
            var userName = _this.$store.state.loginName
            var passWord = _this.$store.state.loginPassWord
            // console.log(_this.$router.currentRoute)

            var Login = {
                go() {
                    _this.$http.post('api/userinfo/login', {
                        username: userName,
                        password: passWord
                    }).then(function (res) {
                        _this.$store.commit('UPDATE_SK', { sk: res.data.data.sk })//获取并保存SK
                        layer.close(loading)
                        if (res.data.state === 200) {
                            layer.msg('登陆成功！', { icon: 1 })
                            //登陆成功后获取用户信息
                            _this.$http.get(('api/userinfo/current?sk=' + _this.$store.state.token)).then(function (res) {
                                _this.$store.commit('UPDATE_USERINFO', { userinfo: res.data.data }) //获取并保存用户信息
                                Login.Jump();
                            })
                           
                        } else {
                            layer.msg('用户名或密码错误', { icon: 2 })
                        }
                    })
                },
                Jump(){
                     _this.$http.get('api/lession/inClass?sk='+_this.$store.state.token+'&cid='+_this.$store.state.userInfo.ClassID).then(function (res) {
                        if(res.data.state==200){
                              setTimeout(function () {
                                if(!!res.data.data && !! res.data.data.Lession){
                                    window.mainRouteInfo = res.data.data
                                    _this.$router.replace({
                                        name: 'main'
                                    })
                                }else{
                                    _this.$router.push({
                                        path: '/loading'
                                    })
                                }
                            }, 100);
                        }else{
                             _this.$router.push({
                                path: '/loading'
                            })
                        }
                    })
                }
            }
            

            if (process.env.NODE_ENV === 'production') {
                UserLogin(userName, userName)
                ResponseHandler('LogIn', function (cres) {
                    if (cres == 'Ok') {
                        Login.go()
                    }
                })
            } else {
                Login.go()
            }
        }
    }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import '../assets/css/common.css';
.bodyBG {
    background: url("../assets/bg1.png") center no-repeat;
    background-size: cover;
    font-family: "Microsoft YaHei";
}

.loadBodyBG {
    background: url("../assets/bg11.png") center no-repeat;
    background-size: cover;
    font-family: "Microsoft YaHei";
}

ul li {
    list-style-type: none;
}

.headImg {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #c9d0ec;
    padding: 5px;
    margin: 0 auto 20px auto;
}

.headImg2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url("../assets/admin.png") center;
    background-size: cover;
}

.loginBody {
    padding-top: 12%;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.loginLeft,
.loginRight {
    position: absolute;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
}

.loginLeft {
    left: 0px;
    margin-left: 10%;
}

.loginRight {
    right: 0px;
    margin-right: 10%;
}

.loginLeft>ul {
    width: 60%;
    height: 46%;
    position: relative;
}

.loginLeft>ul>li {
    width: 72.5px;
    height: 80px;
}

.loginLeft_1 {
    position: absolute;
    top: 0;
    left: 0;
    border-left: 2px solid #7299FF;
    border-top: 2px solid #7299FF;
    border-top-left-radius: 7.5px;
}

.loginLeft_2 {
    position: absolute;
    top: 0;
    right: 0;
    border-right: 2px solid #7299FF;
    border-top: 2px solid #7299FF;
    border-top-right-radius: 7.5px;
}

.loginLeft_3 {
    position: absolute;
    right: 0;
    bottom: 0;
    border-right: 2px solid #7299FF;
    border-bottom: 2px solid #7299FF;
    border-bottom-right-radius: 7.5px;
}

.loginLeft_4 {
    position: absolute;
    bottom: 0;
    left: 0;
    border-left: 2px solid #7299FF;
    border-bottom: 2px solid #7299FF;
    border-bottom-left-radius: 7.5px;
}

.loginLeft>ul>div {
    font-size: 18px;
    color: #FFF;
    top: 50%;
    position: absolute;
    margin-top: -75px;
    left: 50%;
    margin-left: -126px;
}

.loginLeft>ul>div>img {
    margin-bottom: 20px;
}

.loginRight>ul {
    width: 60%;
    height: 46%;
    background: #FFFFFF;
    box-shadow: 0 3px 12px 0 #233376;
    border-radius: 7.5px;
    float: right;
}

.loginRight>ul>div {
    margin: -65px auto 60px auto;
}

.loginRight>ul>li {
    width: 80%;
    height: 14%;
    position: relative;
    margin: 0 auto;
}

.loginRight>ul>li>img {
    width: 27px;
    height: 27px;
    position: absolute;
    top: 16px;
    left: 20px;
}

.loginRight>ul>li>input {
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei";
    border: 1px solid #E5E9F2;
    border-radius: 60px;
    padding-left: 60px;
    box-sizing: border-box;
    font-size: 18px;
    outline: none;
    color: #56545A;
}

.loginRight>ul>li:nth-child(2) {
    margin-bottom: 15px;
}

.loginRight>ul>li>input::-webkit-input-placeholder {
    color: #CACDD2;
}

.loginRight>ul>.loginBtn {
    text-align: center;
    color: #fff;
    line-height: 60px;
    background: #204FC9;
    border-radius: 60px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.30);
    margin: 45px auto 23px auto;
}

.loginRight>ul>.scanLogin {
    text-align: center;
    font-size: 18px;
    color: #1F4CC2;
}
div.loginBody.active>.loginLeft{
    display:none;
}
div.loginBody.active>.loginRight {
    width: 1100px;
    height: 280px;
    float: none;
    box-sizing: border-box;
    padding-right: 0px;
    margin: 114px auto 0 auto;
    position: static;
}

div.loginBody.active>.loginRight>ul {
    width: 1100px;
    height: 280px;
    background: #FFFFFF;
    box-shadow: 0 3px 12px 0 #233376;
    border-radius: 7.5px;
}

div.loginBody.active>.loginRight>ul>div {
    margin: -54px 0 20px 80px;
}

div.loginBody.active>.loginRight>ul>li {
    width: 390px;
    height: 60px;
    position: relative;
    margin: 30px auto 0 auto;
    float: left;
}

div.loginBody.active>.loginRight>ul>li>img {
    width: 27px;
    height: 27px;
    position: absolute;
    top: 16px;
    left: 20px;
}

div.loginBody.active>.loginRight>ul>li>input {
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei";
    border: 1px solid #E5E9F2;
    border-radius: 60px;
    padding-left: 60px;
    box-sizing: border-box;
    font-size: 18px;
    outline: none;
    color: #56545A;
}

div.loginBody.active>.loginRight>ul>li:nth-child(2) {
    margin: 30px 30px 0 70px;
}

div.loginBody.active>.loginRight>ul>li>input::-webkit-input-placeholder {
    color: #CACDD2;
}

div.loginBody.active>.loginRight>ul>.loginBtn {
    width: 120px;
    text-align: center;
    color: #fff;
    line-height: 60px;
    background: #204FC9;
    border-radius: 60px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.30);
    margin-left: 30px;
}

div.loginBody.active>.loginRight>ul>.scanLogin {
    text-align: center;
    font-size: 18px;
    color: #1F4CC2;
    float: right;
    margin: 15px -68px 0 0;
}
</style>
